<template>
  <div class="main">
    <img :src="item.img"
         alt="">
    <div class="item1">
      <p class="p1">{{item.name}}</p>
      <p class="p2">{{item.msg}}</p>
    </div>
    <div class="item2">
      <p class="p2">ID：{{item.uid}}</p>
      <!--<p class="p2">{{item.up_agent}} </p>-->
      <div class="btn-to" :class="item.status==='ok'?'check':'nocheck'" @click="toGrant">{{text}}</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    /** kebab-case */
    name: 'viplistitem',

    data() {
      return {};
    },
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    components: {},
    methods: {
      toGrant() {
        //  去授权
        if (this.item.status === 'ok') {
          //  可以授权
          let data = {
            uid: this.item.uid
          };
          this.$UserReq.VipOpen(data).then((res) => {
            console.log(res, 'rerererer');
            if (res.data.status === 'ok') {
              alert(res.data.msg);
            } else if (res.data.status === 'no') {
              alert(res.data.msg);
            } else {
              let data = {
                targetType: res.data.target.type,
                targetId: res.data.target.id,
                money: res.data.money
                // consigneeStyle: res.data.tips.key,
                // consigneeName: res.data.tips.value
              };
              this.$router.push({
                name: 'pay-option-sec',
                query: data
              });
            }
          });
        }
      }
    },
    computed: {
      text() {
        if (this.item.status === 'ok') {
          return '￥' + this.item.money;
        } else {
          return '不能授权';
        }
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    beforeCreate() {
      /** 可以在这加个loading事件，在加载实例时触发 */
      // 这个阶段实例的data、methods是读不到的
    },
    created() {
      console.log('saddsa', this.item);
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .p1 {
    word(16px, #666)
  }

  .p2 {
    word(14px, #666)
  }

  .item1 {
    flex-y();
    flex: 1;
    height 24vw
    align-items flex-start;
    padding-left 3vw
    justify-content space-around
  }

  .item2 {
    flex-y();
    height 16vw
    justify-content space-around;
    align-items flex-end;
    & p {
      line-height 1.2
    }
    .btn-to {
      background main-color
      font-size word14
      padding 2vw
      border-radius vw(10)
    }
    .check {
      color #fff
    }
    .nocheck {
      color #ccc
    }
  }

  .main {
    width 92vw;
    border-radius vw(10);
    flex-x();
    padding 0 6vw;
    height: vw(90px);
    background #fff;
    box-sizing: border-box;
    & img {
      border-radius: 50%;
      width: vw(55px)
      height: vw(55px)
    }
  }

  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()
</style>
